<template>
	<view>
		<view class="wrap">
			<text @click="clkEditFavoritesFolder(null, -1, 'add')" class="text-pass">添加收藏夹</text>

			<scroll-view v-if="dataList.length" scroll-y style="height: 100%;width: 100%;" >
				<view class="page-box" >
					<view class="item" v-for="(item, index) in dataList" :key="index">
						<view class='txt-name' @click="clkItem(item, index)">
							<text><text>{{item.clipName}}({{ item.collectionNum }})</text></text>
						</view>

						<image @click="clkEditFavoritesFolder(item, index, 'edit')" class="img-edit"
							src="/static/img/community/ic_edit.png"></image>
						<image @click="clkDelFavoritesFolder(item, index)" class="img-del"
							src="/static/img/ic_del.png"></image>
					</view>
<!-- 					<u-loadmore :status="loadStatus[0]" bgColor="#ffffff"></u-loadmore> -->
				</view>

			</scroll-view>
			<view class="no-data-wrapper" v-if="!dataList.length && noDataFlag">
				<img class="no-image" src="/static/img/colloct_no.png" alt="" srcset="">
				<view class="text-top">暂无收藏</view>
				<view class="text-bottom">您还没有添加收藏</view>
			</view>
		</view>

		<u-modal @confirm="confirmDelFolder(selectedIndex)" :show-title=false :showCancelButton=true
			v-model="showDelDialog" :content="delMsg"></u-modal>

		<u-modal ref="editModal" @cancel="cancelEditFolder(selectedIndex)" @confirm="confirmEditFolder(selectedIndex)"
			:show-title="false" :showCancelButton="true" v-model="showEditDialog">
			<view class="slot-content">
				<input class="slot-field" maxlength="10" label-width=0 v-model="folderName" placeholder="请输入收藏夹名称"></u-field>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import apis from '@/apis.js'
	export default {
		data() {
			return {
				noDataFlag: false,
				delMsg: '删除后将删除该收藏夹内的内容，是否继续？',
				showDelDialog: false,
				showEditDialog: false,
				selectedData: {}, // 选中的下拉数据
				selectedIndex: -1,
				folderName: '',
				orderList: [],
				dataList: [],
				dx: 0,
				loadStatus: ['loadmore'],
			};
		},
		onShow() {
			this.getList()
		},
		computed: {},
		methods: {
			getList() {
				this.noDataFlag = false

				this.$http.get(apis.collectionList).then(res => {
					if (res.data.code === 200) {
						this.noDataFlag = true
						this.dataList = res.data.result
					}
				})
			},
			clkItem(item, index) {
				uni.navigateTo({
					url: '../detailList/detailList?id=' + item.id + '&clipName=' + item.clipName
				})
			},
			cancelEditFolder(selectedIndex) {
				console.log("cancel" + selectedIndex);
				this.folderName = ''
			},
			/**
			 * @param {Object} 新增 / 编辑
			 */
			confirmEditFolder(index) {
				this.showEditDialog = true
				if (!this.folderName) {
					uni.showToast({
						title: '文件夹名称不能为空',
						icon: 'none'
					})
					return
				}
				if (this.$refs.editModal.actionType == 'edit') {
					this.$http.post(apis.clipEdit, { clipName: this.folderName, clipId: this.selectedData.id  }).then(res => {
						if (res.data.code === 200) {
							this.showEditDialog = false
							this.getList()
						}
					})
				} else if (this.$refs.editModal.actionType == 'add') {
					this.$http.post(apis.collectionAdd, { clipName: this.folderName, }).then(res => {
						if (res.data.code === 200) {
							this.showEditDialog = false
							this.getList()
						}
					})
				}
				this.folderName = '';
			},
			clkEditFavoritesFolder(item, index, type){
				this.selectedIndex = index;
				this.showEditDialog = true;
				if (type == 'edit') {
					this.selectedData = item
					this.folderName = item.clipName;
				}
				this.$refs.editModal.actionType = type;
			},
			/**
			 * @param {Object} 删除
			 */
			confirmDelFolder() {
				this.$http.post(apis.clipDelete, { clipId: this.selectedData.id }).then(res => {
					if (res.data.code === 200) {
						this.getList()
					}
				})
			},
			clkDelFavoritesFolder(item, index){
				this.selectedData = item
				this.selectedIndex = index;
				this.showDelDialog = true;
			},
			clkSubmit: function() {}
		},

	};
</script>
<style lang="scss" scoped>
@import "uview-ui/index.scss";
	.page-box {
		margin-top: 33rpx;
	}

	.slot-content {
		display: flex;
		flex-flow: column nowrap;
		font-size: 31rpx;
		color: $u-content-color;
		padding: 80rpx 40rpx;

		.slot-field {
			width: auto;
			text-align: center;
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;

		.sv-main {
			height: 50%;
			flex-grow: 2;
		}

		.text-pass {
			font-size: 31rpx;
			font-family: SimHei;
			font-weight: 400;
			line-height: 40rpx;
			color: #4D5B80;
			opacity: 1;

			align-self: flex-end;
			margin-top: 23rpx;
			margin-right: 29rpx;

			border-bottom: 2rpx solid #4D5B80;
			opacity: 1;
		}

		.item {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			margin: 0 29rpx;
			padding: 23rpx 0;

			border-bottom: 2rpx solid #BFBFBF;
			;


			.txt-name {
				flex-grow: 1;
				font-size: $title-font;
				font-family: SimHei;
				font-weight: 400;
				line-height: 52rpx;
				color: #4D5B80;
				opacity: 1;

				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}


			.img-edit {
				width: 40rpx;
				flex-shrink: 0;
				height: 40rpx;
				margin-right: 31rpx;
				margin-left: 20rpx;
			}

			.img-del {
				width: 39rpx;
				flex-shrink: 0;
				height: 41rpx;
			}
		}

		.item:first-child {
			border-top: 2rpx solid #BFBFBF;
		}
	}
	.no-data-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 228rpx;
		.no-image {
			width: 369rpx;
			height: 229rpx;	
			margin-bottom: 43rpx;
		}
		.text-top {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #212121;
			margin-bottom: 34rpx;
		}
		.text-bottom {
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #707070;
		}
	}
</style>
